import Image from 'next/image'
import Header from '@/components/home/header'
import titleUrl from '@/assets/images/title.png'
import PicList from '@/components/picList'
import titieInfoUrl from '@/assets/images/titleinfo.png'
import bgUrl from '@/assets/images/bg1.png'
import { useStores } from '@/store'
import { useEffect, useState } from 'react'
import { AiSample, ResAiSampleList } from '@/types'
import { getAidrawSample } from '@/api'
import Infodialog from '@/components/home/dialog'
import { useClickAway } from 'ahooks'; // 导入 useClickAway 钩子函数
import { Toast,Dialog } from 'antd-mobile'

export default function Headshot() {
  
  const store = useStores()
  const [data, setData] = useState<Partial<ResAiSampleList>>({})
  const [showDialog,setShowDialog]=useState(false)

  useEffect(() => {
    getAidrawSample().then((res) => {
      if (res.code) {
        setData(res.data)
        store.active.cannalPolling();
      }
    })
  }, [])
  return (
    <div className='w-full h-full  min-h-r66.7  relative'>
      <Header cb={() => { }} headerColor='bg-FFE5E5' headerText={'AI生成情侣头像'}></Header>
      <div className=' w-r34.5 h-r16.5 bg-white m-r1.5 rounded-xl relative'>
        <Image src={bgUrl} className='w-full h-full' alt={''} onClick={()=>{
          setShowDialog(true)
        }} ></Image>
        <div className=' w-full h-r4.5 leading-r4.5 text-center absolute z-10  bottom-0 font-bold text-EF3964 '>
          <span>今日共获得：{data.today_num} 点 </span>
          <span>活动共获得：{data.total_num} 点</span>
        </div>
      </div>
      {showDialog?<Infodialog cb={setShowDialog}></Infodialog>:null}

      <div className='p-r1.5'>
        <Image className=' w-r34.5 h-auto' src={titieInfoUrl} alt={''}></Image>
      </div>
      <div className=' pl-r1.5'>
        <Image className=' w-r32.5 h-auto' src={titleUrl} alt={''}></Image>
      </div>
      <PicList list={data.list||[]}></PicList>
    </div>
  )
}
